<layout name="inner"/>
<include file="Public:angular"/>
<script>
App.controller("vtcontroller",["$scope",function($scope){
$scope.chooseCountry=function(){
$.getJSON("__MODULE__/Public/getState/country_name/"+$scope.bill_country,function(data){
$scope.state_list=data;
$scope.$apply();
})
}
}])
</script>
<form ng-controller="vtcontroller" id="validate_form" class="uk-form" method="post" action="__CONTROLLER__/VtProcess">
<div class="uk-alert">{$Think.lang.order_info}</div>		
    <div class="uk-grid">
		<div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.site}:
		<select name="site_id" required>
		<volist name="list" id="vo">
		<option value="{$vo.site_id}">{$vo.site_domain}</option>
		</volist>
		</select></div>
		<div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.amount}({$web_config.web_currency}):
		<input type="text" number="true" name="order_amount" required placeholder="" class="uk-width-1-1">
	
		</div>
</div>		
<div class="uk-alert">{$Think.lang.customer_info}</div>		
    <div class="uk-grid">
		 <div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.email}:<input type="text" name="bill_email" required email="true" placeholder="" class="uk-width-1-1"></div>
		 <div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.phone}:<input type="text" name="bill_phone" required placeholder="" class="uk-width-1-1"></div>
		 <div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.country}:
				<select required ng-model="bill_country" name="bill_country" ng-change="chooseCountry()">
		<option value="">--Please choose--</option>				
		<volist name=":getCountryList()" id="vo">
		<option value="{$vo.countries_iso_code_2}">{$vo.countries_name}</option>
		</volist>
		</select> 
		 </div>
		 <div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.state}:
				<select name="bill_state" required >
		<option value="">--Please choose--</option>		
		<option value="Not applicable">Not Applicable</option>	
		<option ng-repeat="state in state_list" value="{{state.zone_code}}">{{state.zone_name}}</option>
		</select> 		 
		 </div>
		 <div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.city}:<input type="text" name="bill_city" required placeholder="" class="uk-width-1-1"></div>
		 <div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.street}:<input type="text" name="bill_street" required placeholder="" class="uk-width-1-1"></div>
		 <div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.zip}:<input type="text" name="bill_zip" required placeholder="" class="uk-width-1-1"></div>
		 <div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.firstname}:<input type="text" name="bill_firstname" required placeholder="" class="uk-width-1-1"></div>
		 <div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.lastname}:<input type="text" name="bill_lastname" required placeholder="" class="uk-width-1-1"></div>
	</div>
<div class="uk-alert">{$Think.lang.card_info}</div>	
<div class="uk-grid">	
		 <div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.card_num}:<input type="text" name="card_num" required creditcard="true" placeholder="" class="uk-width-1-1"></div>
		 <div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.card_cvv}:<input type="text" name="card_cvv" required digits="true" minlength="3" maxlength="4"  placeholder="" class="uk-width-1-1"></div>
		 <div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.card_ex_month}:
		 		<select name="ex_month" >
		<volist name=":getCardExpiryDate('m')" id="vo">		
		<option value="{$vo}">{$vo}</option>	
		</volist>
		</select>
		 </div>
		 <div class="uk-width-medium-1-4 uk-width-small-1-2">{$Think.lang.card_ex_year}:
		 		<select name="ex_year" >
		<volist name=":getCardExpiryDate('y')" id="vo">		
		<option value="{$key}">{$vo}</option>	
		</volist>
		</select>		 
		 </div>		    
    </div>
	<p>
<button type="submit" class="uk-button uk-button-danger">{$Think.lang.confirm}</button>
</p>
</form>